<template>
	<mescroll-uni :ref="'mescrollRef'+tabIndex" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="u-padding-left-32 u-padding-right-32 swiper-box-padding" v-if="dataList.length">
			<view v-for="(item,index) in dataList" :key="index" class="u-margin-top-20">
				<list-item :item="item" :showStar="false" :showFooterRight="false" :isShare="false" height="346"
					width="214">
					<view slot="content" @click="goPathDetail(item)">
						<view class="u-font-24 content-desc-item u-padding-top-20">
							开放上车时间：{{item.enrollTime | timeFormat}}
						</view>
						<view class="u-font-24 content-desc-item u-padding-top-20">
							<flex-text size="24" txt="发车时间" width="144"></flex-text>：{{item.estimateTime | timeFormat}}
						</view>
					</view>
					<view class="u-font-32 text-bold" slot="avatarRight"  v-if="tab.name!=='已完成'">
						<text class="text-color-txtTheme">{{item.participate}}</text>
						<text class="content-desc-item">/{{item.people}}人</text>
					</view>
					<view slot="footer-end" class="u-flex u-row-left u-margin-top-15">
						<view class="u-flex">
							<view class="u-margin-right-10" v-if="tab.name!=='已完成'">
								<item-btn @click="closeCar('cancelCar',item)" width="190" height="64" type="plain">
									取消发车
								</item-btn>
							</view>
							<item-btn @click="shareStore(item)" width="190" height="64"
								v-if="item.participate!==item.people&&timeout(item)">
								邀请店家
							</item-btn>
						</view>
						<!-- <item-btn @click="userList(item)" width="190" height="64" v-if="tab.name==='已完成'">参与店家
						</item-btn> -->
						<view v-if="tab.name==='已完成'" class="u-flex  u-text-right" :style="{width:'100%'}">
							<view class="u-font-30 u-flex-1">
								<text class="text-color-txtTheme">{{item.participate}}</text>
								<text class="content-desc-item">/{{item.people}}人</text>
							</view>
							<view class="u-font-23  u-flex-1">
							  <u-icon name="gou" size="24" custom-prefix="custom-icon" color="#765CFE"></u-icon>
								<text class="box-title u-margin-left-10">已完成</text>
							</view>
						</view>
					</view>
				</list-item>
			</view>
		</view>
		<model v-model="modelFlag" :show-title="false" :show-cancel-button="modelType!=='rejectFlag'"
			:show-confirm-button="modelType!='confirmCar'"  cancel-color="#333333" :confirm-color="currentThemeObj.primary"
			:content="closeModalTips" @confirm="confirmClose" @cancel="clearTime" />
	</mescroll-uni>
</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import carManager from '@/mixins/carManager.js'
	import model from '@/components/u-modal/u-modal.vue'
	export default {
		mixins: [upCallback, carManager], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		props: {
			tab: {
				type: Object,
				default: () => ({})
			},
			tabIndex: {
				type: Number,
				default: 0
			},
			inputName: {
				type: String,
				default: ''
			},
		},
		components: {
			model
		},

		data() {
			return {
				apiType: "driveCar",
				apiModule: 'shopApi',
				name: 'thirdQuery',
				modelFlag: false,
				form: {},
				goon: {
					backgroundColor: '#765CFE',
					borderColor: 'none',
					width: '143rpx'
				},
				goonDis: {
					backgroundColor: 'rgba(118,92,254,0.4)',
					borderColor: 'none',
					width: '143rpx'
				},
			}
		},
		computed: {
			isStore() {
				return this.isAuth === 'store'
			},
			isAuth() {
				const loginForm = this.loginForm;
				return loginForm && loginForm.userType || 'store'
			}
		},
		watch: {
			inputName(val) {
				this.$u.debounce(() => {
					this.form.name = val;
					this.downCallback()
				}, 300)
			}
		},
		created() {
			const {
				type,
				showEnrollTime
			} = this.tab;
			this.form = {
				type,
				status: type,
				showEnrollTime
			}
		},
		methods: {
			goPathDetail(item) {
				const url = this.isStore ? '/pagesA/goOnLarp/detail' : '/pagesA/goonLarpManager/detail'
				this.$u.route({
					url,
					params: {
						id: item.id
					}
				})
			},
			//评测
			reply(item) {
				if (item.isEvaluation) return false;
				this.$u.route({
					url: '/pagesA/userSubmit/userSubmit',
					params: {
						type: "settingTest",
						productId: item.productId,
						id: item.id
					}
				})
			},
			//意向
			want(item) {
				if (item.isSubmitIntention) return false;
				this.$u.route({
					url: '/pagesA/want/setting',
					params: {
						productId: item.productId,
						driveCarId: item.id
					}
				})
			},
			cancelCarcallback(res) {
				this.dataList = this.dataList.filter(val => (val.id != res.id&&val.id != res.driveCarId));
				if (this.dataList.length === 0) {
					this.downCallback()
				}
			},
			//发车回调
			startCarcallback(res) {
				this.cancelCarcallback(res)
			},
			selectCallback() {
				this.downCallback()
			},
			//上车回调
			intoCar(item) {
				this.sort()
				this.goPathDetail(item)
			},
			//排序
			sort() {
				this.dataList.sort(a => a.isIntoCar ? -1 : 1)
			},
			userList(item) {
				this.$u.route({
					url: '/pagesA/carUserList/carUserList',
					params: {
						id: item.id
					}
				})
			},
			timeout(item) {
				const nowTime = new Date().getTime();
				const time = new Date(item.enrollTime).getTime();
				return nowTime > time;
			}
		}
	}
</script>

<style>
</style>
